<template>
  <div class="pages storesCreate">
    <div class="container_box">
      <div class="tableSearch">
        <el-button v-if="permission==1" type="primary" @click="submitForm('ruleForm')" size="mini">保存</el-button>
        <el-button v-if="permission==0&&setRole('修改')" type="primary" @click="editstatus()" size="mini">修改</el-button>
      </div>
      <el-form :model="ruleForm" :label-position="labelPosition" :rules="rules" ref="ruleForm" label-width="90px" class="demo-ruleForm system">
        <el-tabs v-model="activeName" type="card">
          <el-tab-pane label="基本信息" class="second" name="first">
            <el-row>
              <el-form-item class="" label="门店邀请码：" label-width="110px">
                <span>{{ruleForm.invitationCode}}</span>
              </el-form-item>
            </el-row>
            <el-row>
              <el-form-item class="" label="启用">
                <el-checkbox :disabled="permission==0" v-model="ruleForm.status"></el-checkbox>
              </el-form-item>
            </el-row>
            <el-row class="rowspace" :gutter="40">
              <el-col :span="8">
                <el-form-item class="" label="门店名称:" prop="name">
                  <el-input @keyup.native='replace(ruleForm.name,ruleForm,"name")' v-if="permission==1" maxlength="16" v-model="ruleForm.name" size="small"></el-input>
                  <span v-if="permission==0">{{ruleForm.name}}</span>
                </el-form-item>

              </el-col>
              <el-col :span="8">
                <el-form-item class="" label="门店地址:" prop="address">
                  <el-input v-if="permission==1" maxlength="16" v-model="ruleForm.address" size="small"></el-input>
                  <span v-if="permission==0">{{ruleForm.address}}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item class="" label="法人:" prop="principal">
                  <el-input @keyup.native='replace(ruleForm.principal,ruleForm,"principal")' v-if="permission==1" maxlength="18" v-model="ruleForm.principal" size="small"></el-input>
                  <span v-if="permission==0">{{ruleForm.principal}}</span>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row class="rowspace" :gutter="40">
              <el-col :span="8">
                <el-form-item label-width="150px" class="" label="统一社会信用代码:" prop="creditCode">
                  <el-input @keyup.native='replace(ruleForm.creditCode,ruleForm,"creditCode")' v-if="permission==1" maxlength="18" v-model="ruleForm.creditCode" size="small"></el-input>
                  <span v-if="permission==0">{{ruleForm.creditCode}}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item class="" label="联系人:" prop="linkName">
                  <el-input v-if="permission==1" maxlength="16" v-model="ruleForm.linkName" size="small"></el-input>
                  <span v-if="permission==0">{{ruleForm.linkName}}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label-width="115px" label="联系人手机号:" prop="linkPhone">
                  <el-input @keyup.native='replace(ruleForm.linkPhone,ruleForm,"linkPhone")' v-if="permission==1" maxlength="11" v-model="ruleForm.linkPhone" size="small"></el-input>
                  <span v-if="permission==0">{{ruleForm.linkPhone}}</span>
                </el-form-item>
              </el-col>

            </el-row>
            <el-row class="rowspace" :gutter="40">
              <el-col :span="8">
                <el-form-item label-width="120px" label="法人身份证号码:" prop="idcardNumber">
                  <el-input @keyup.native='replace(ruleForm.idcardNumber,ruleForm,"idcardNumber")' maxlength="18" v-if="permission==1" v-model="ruleForm.idcardNumber" size="small"></el-input>
                  <span v-if="permission==0">{{ruleForm.idcardNumber}}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="邮箱:" prop="email">
                  <el-input @keyup.native='replace(ruleForm.email,ruleForm,"email")' v-if="permission==1" maxlength="30" v-model="ruleForm.email" size="small"></el-input>
                  <span v-if="permission==0">{{ruleForm.email}}</span>
                </el-form-item>
              </el-col>

              <el-col :span="8">
                <el-form-item label-width="140px" label="食品流通许可证号:" prop="foodLicenseNumber">
                  <el-input @keyup.native='replace(ruleForm.foodLicenseNumber,ruleForm,"foodLicenseNumber")' v-if="permission==1" v-model="ruleForm.foodLicenseNumber" size="small"></el-input>
                  <span v-if="permission==0">{{ruleForm.foodLicenseNumber}}</span>
                </el-form-item>
              </el-col>

              <!-- <el-col :span="8">
                            <el-form-item class="" label="纳税人类型:" prop="taxesType">
                                <template>
                                    <el-select size="small" @change="changeOrgCode()" v-model="ruleForm.taxesType" placeholder="请选择">
                                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                                        </el-option>
                                    </el-select>
                                </template>
                            </el-form-item>
                        </el-col> -->
            </el-row>
            <el-row class="rowspace" :gutter="40">

              <el-col :span="8">
                <el-form-item label-width="115px" label="注册资金(万元):" prop="registeredCapital">
                  <el-input v-if="permission==1" maxlength="16" v-model="ruleForm.registeredCapital" onkeyup="this.value= this.value.match(/\d+(\.\d{0,2})?/) ? this.value.match(/\d+(\.\d{0,2})?/)[0] : ''" onafterpaste="this.value= this.value.match(/\d+(\.\d{0,2})?/) ? this.value.match(/\d+(\.\d{0,2})?/)[0] : ''" size="small"></el-input>
                  <span v-if="permission==0">{{ruleForm.registeredCapital}}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item class="" label="固定电话:" prop="fixPhone">
                  <el-input v-if="permission==1" maxlength="16" v-model="ruleForm.fixPhone" size="small"></el-input>
                  <span v-if="permission==0">{{ruleForm.fixPhone}}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item class="" label="传真:" prop="fax">
                  <el-input oninput="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')" v-if="permission==1" maxlength="16" v-model="ruleForm.fax" size="small"></el-input>
                  <span v-if="permission==0">{{ruleForm.fax}}</span>
                </el-form-item>
              </el-col>

            </el-row>
            <el-row :gutter="40">
              <el-col :span="8">
                <el-form-item label-width="140px" label="储值业务资金归属:" prop="deployType" size='small'>
                  <el-select :disabled="permission!=1" v-model="ruleForm.deployType" placeholder="请选择" style='width: 100%' @change='deployTypehange'>
                    <el-option label='归属公司' value='1'></el-option>
                    <el-option label='归属门店' value='2'></el-option>
                    <el-option label='按保证金比例归属公司' value='3'></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item class="" label="对账周期:" prop="checkCycle">
                  <el-select :disabled="permission!=1" v-model="ruleForm.checkCycle" placeholder="请选择" style='width: 80%' @change='selectChange'>
                    <el-option v-for='item in cycle' :key="item" :label="item" :value="item"></el-option>
                  </el-select>
                  <span style='margin-left:4px;color:#c0c4cc;'>个月</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item class="" label="对账日期:" prop="checkDate">
                  <el-select :disabled="permission!=1" v-model="ruleForm.checkDate" placeholder="请选择" style='width: 80%' @change='selectChange'>
                    <el-option v-for='item in Dates' :key="item" :label="item" :value="item"></el-option>
                  </el-select>
                  <span style='margin-left:4px;color:#c0c4cc;'>日</span>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="40">
              <el-col :span="8" v-if="ruleForm.deployType=='3'">
                <el-form-item class="" label="保证金比例:" prop="depositRatio">
                  <div v-if="permission==1">
                    <sd-input :val.sync='ruleForm.depositRatio' :deployType="2" class='sd-input'></sd-input>
                    <span style='margin-left:4px;color:#c0c4cc;'>%</span>
                  </div>
                  <span v-if="permission==0">{{ruleForm.depositRatio}}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item class="" label="服务商:" prop="serviceInfoId" size='small'>
                  <el-select :disabled="permission!=1" v-model="ruleForm.serviceInfoId" placeholder="请选择" style='width: 100%' @change='selectChange'>
                    <el-option label='请选择' value=''></el-option>
                    <el-option v-for='item in serviceList' :key="item.serviceInfoId" :label="item.serviceName" :value="item.serviceInfoId"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item class="" label="备注:" prop="remark">
                  <el-input v-if="permission==1" type="textarea" :rows="2" v-model="ruleForm.remark" size="small"></el-input>
                  <span v-if="permission==0">{{ruleForm.remark}}</span>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="7">
                <el-form-item class="rowtwo" label="商户LOGO" prop="logoUrl">
                  <div class="imgbox"><img :src="ruleForm.logoUrl" @click="showimg(ruleForm.logoUrl)" alt=""></div>
                  <el-upload class="upload-demo" action="1" :show-file-list="false" :before-upload="beforeAvatarUpload" :http-request="uploadSectionFile">
                    <el-button :disabled="permission==0" size="small" @click="addindex('logoUrl')" type="primary">点击上传</el-button>
                  </el-upload>
                </el-form-item>
              </el-col>
              <el-col :span="7">
                <el-form-item class="rowtwo" label="营业执照信息" prop="licenseUrl">
                  <div class="imgbox"><img :src="ruleForm.licenseUrl" @click="showimg(ruleForm.licenseUrl)" alt=""></div>
                  <el-upload class="upload-demo" action="1" :show-file-list="false" :before-upload="beforeAvatarUpload" :http-request="uploadSectionFile">
                    <el-button :disabled="permission==0" size="small" @click="addindex('licenseUrl')" type="primary">点击上传</el-button>
                  </el-upload>
                </el-form-item>
              </el-col>
              <el-col :span="7">
                <el-form-item class="rowtwo" label="食品流通许可证" prop="foodUrl">
                  <div class="imgbox"><img :src="ruleForm.foodUrl" @click="showimg(ruleForm.foodUrl)" alt=""></div>
                  <el-upload class="upload-demo" action="1" :show-file-list="false" :before-upload="beforeAvatarUpload" :http-request="uploadSectionFile">
                    <el-button :disabled="permission==0" size="small" @click="addindex('foodUrl')" type="primary">点击上传</el-button>
                  </el-upload>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="40">
              <el-col :span="7">
                <el-form-item class="rowtwo" label="法人身份证正面" prop="idcardFront">
                  <div class="imgbox"><img :src="ruleForm.idcardFront" @click="showimg(ruleForm.idcardFront)" alt=""></div>
                  <el-upload class="upload-demo" action="1" :show-file-list="false" :before-upload="beforeAvatarUpload" :http-request="uploadSectionFile">
                    <el-button :disabled="permission==0" size="small" @click="addindex('idcardFront')" type="primary">点击上传</el-button>
                  </el-upload>
                </el-form-item>
              </el-col>
              <el-col :span="7">
                <el-form-item class="rowtwo" label="法人身份证反面" prop="idcardReverse">
                  <div class="imgbox"><img :src="ruleForm.idcardReverse" @click="showimg(ruleForm.idcardReverse)" alt=""></div>
                  <el-upload class="upload-demo" action="1" :show-file-list="false" :before-upload="beforeAvatarUpload" :http-request="uploadSectionFile">
                    <el-button :disabled="permission==0" size="small" @click="addindex('idcardReverse')" type="primary">点击上传</el-button>
                  </el-upload>
                </el-form-item>
              </el-col>
            </el-row>
          </el-tab-pane>
          <el-tab-pane label="门店信息" class="second" name="second">
            <el-row :gutter="40">
              <el-col>
                <el-form-item label="是否营业" prop="isBusiness">
                  <el-radio-group :disabled="permission==0" v-model="ruleForm.isBusiness">
                    <el-radio label="0" value='0'>是</el-radio>
                    <el-radio label="1" value='1'>否</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="40">
              <el-col :span="8">
                <el-form-item label="门店合作类型" prop="shopType" label-width="120px">
                  <template>
                    <el-select :disabled="permission==0" size="small" v-model="ruleForm.shopType" placeholder="请选择">
                      <el-option v-for="item in shopType" :key="item.label" :label="item.label" :value="item.value">
                      </el-option>
                    </el-select>
                    <!-- <span v-if="permission==0">{{ruleForm.shopType}}</span> -->
                  </template>
                </el-form-item>
              </el-col>
              <el-col :span="10">
                <el-form-item label="门店营业时间" label-width="120px" prop="time">
                  <template>
                    <el-time-picker :disabled="permission==0" size="small" value-format='HH:mm:ss' is-range v-model="ruleForm.time" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" placeholder="选择时间范围">
                    </el-time-picker>
                    <!-- <span v-if="permission==0">{{ruleForm.time}}</span> -->
                  </template>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="40">
              <el-col :span="8">
                <el-form-item prop="businessScope" label="经营范围">
                  <el-checkbox-group :disabled="permission == 0" v-model="ruleForm.businessScope[0]" @change="Management">
                    <el-checkbox :true-label="'0'" :false-label="'1'">商品售卖</el-checkbox>
                    <!-- </el-checkbox-group>
                                    <el-checkbox-group :max="1" :disabled="permission==0" v-model="ruleForm.businessScope"> -->
                    <!-- <el-checkbox label="1">服务预约</el-checkbox>
                    <el-checkbox label="2">小儿游泳</el-checkbox> -->
                  </el-checkbox-group>
                  <el-radio :disabled="permission==0" v-model="ruleForm.businessScope[1]" label="1">服务预约</el-radio>
                  <el-radio :disabled="permission==0" v-model="ruleForm.businessScope[1]" label="2">小儿游泳</el-radio>
                  <!-- <el-radio v-model="radio1" label="0">商品售卖</el-radio> -->
                  <!-- <el-radio-group v-model="ruleForm.businessScope">
                                    <el-radio label="1">服务预约</el-radio>
                                    <el-radio label="2">小儿游泳</el-radio>
                                </el-radio-group> -->
                </el-form-item>
              </el-col>
              <el-col :span="11">
                <el-form-item label="区域" prop="area" class="rowtwo">
                  <v-distpicker v-if="permission==1" :province="ruleForm.area.province" :city="ruleForm.area.city" :area="ruleForm.area.area" @selected="onSelected" @area="onChangeArea" @province="onChangeProvince" @city="onChangeCity"></v-distpicker>
                  <span v-if="permission==0">{{ruleForm.area.province}}-{{ruleForm.area.city}}-{{ruleForm.area.area}}</span>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col>
                <el-form-item prop="managementTypeIdList" label="门店经营类型" label-width='120px'>
                  <el-checkbox-group :disabled="permission == 0 " v-model="ruleForm.managementTypeIdList">
                    <el-checkbox v-for='item in managementTypeList' :label="item.id" :key='item.id'>{{item.name}}</el-checkbox>
                  </el-checkbox-group>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="40" class="qrcodes">
              <el-col :span="8">
                <el-form-item label="定位" prop="position" class="rowtwo map-error-position" :show-message='showErrMsg'>
                  <div class="map-demo" v-if="showMap">
                    <gd-map v-bind:positionMap='ruleForm.position' v-bind:permission='permission' v-bind:latitude='ruleForm.latitude' v-bind:longitude='ruleForm.longitude' v-on:listenToChild="showMsgFromChild" v-on:handleShowErrMsg="handleShowErrMsg"></gd-map>
                  </div>
                  <div class="map-demo" v-else>
                    <span>暂无定位信息</span>
                  </div>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="详细地址" class="rowtwo rowsecond" prop="positionAddress">
                  <el-input :disabled="permission==0" v-model="ruleForm.positionAddress" size="small"></el-input>
                </el-form-item>
              </el-col>

            </el-row>
            <!-- <el-row class="qrcode">
              <el-col :span="8">
                <el-form-item label="小程序二维码" label-width="120px">
                  <el-button size="small" @click="alicode" type="primary">生成小程序二维码</el-button>
                  <el-button size="small" @click="downs" type="primary">下载小程序二维码</el-button>
                  <br>
                  <el-input maxlength="100" v-model="ruleForm.storeCode" placeholder="二维码地址" size="small"></el-input>
                  <br>
                </el-form-item>
              </el-col>

            </el-row> -->
          </el-tab-pane>
        </el-tabs>
      </el-form>
    </div>

  </div>
</template>
<script>
import {
  uploadFile,
  insertBaseShop,
  updateBaseShop,
  getFile,
  selectBaseShop,
  findServiceProviderByTypeNumberList,
  getManagementTypeList
} from "@/api";
import util from "@/util";
import gdMap from "@/components/GdMap.vue";
import VDistpicker from "v-distpicker";
import sdInput from "@/components/SdInput";
import { mapState } from "vuex";
// import { constants } from 'http2';
// 高德地图组件
export default {
  components: {
    gdMap,
    VDistpicker,
    sdInput
  },
  computed: mapState(["power", "merchantId", "power"]),
  data() {
    const validTelPhone = (rule, value, callback) => {
      if (value && !util.validTelPhone(value)) {
        return callback(new Error("固定电话格式不正确 "));
      } else {
        callback();
      }
    };
    const validEmail = (rule, value, callback) => {
      if (!util.validEmail(value)) {
        return callback(new Error("邮件格式不正确！"));
      } else {
        callback();
      }
    };
    const validIdentity = (rule, value, callback) => {
      if (value === "") {
        return callback();
      } else if (!util.validIdentity(value)) {
        return callback(new Error("身份证号码格式不正确！"));
      } else {
        callback();
      }
    };
    return {
      cycle: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
      Dates: [
        1,
        2,
        3,
        4,
        5,
        6,
        7,
        8,
        9,
        10,
        11,
        12,
        13,
        14,
        15,
        16,
        17,
        18,
        19,
        20,
        21,
        22,
        23,
        24,
        25,
        26,
        27,
        28
      ],
      showMap: false,
      id: "",
      labelPosition: "left",
      radio1: "",
      permission: 0, //0:查看,1修改
      area: { province: "", city: "", area: "" },
      activeName: "first", //tab标签名称
      imgindex: "", //当前上传
      shopType: [
        {
          value: 0,
          label: "直营"
        },
        {
          value: 1,
          label: "加盟"
        },
        {
          value: 2,
          label: "联营"
        }
      ],
      showErrMsg: false,
      ruleForm: {
        depositRatio: "", //保证金比例
        checkCycle: "1", //对账周期
        checkDate: "1", //对账日期
        deployType: "2", //储值业务资金归属：
        status: true, //启用
        name: "", //门店名称
        address: "", //门店地址
        principal: "", //法人
        creditCode: "", //社会统一信用代码
        registeredCapital: "", //注册资金
        taxesType: "", //纳税人类型
        linkName: "", //联系人
        linkPhone: "", //联系电话
        fixPhone: "", //固定电话
        registeredCapital: "", //注册资金
        fax: "", //传真
        email: "", //邮箱
        remark: "", //备注
        logoUrl: "", //logoUrl
        licenseUrl: "", //营业执照
        foodUrl: "", //食品流通许可证
        idcardFront: "", //身份证正面
        idcardReverse: "", //身份证反面
        idcardNumber: "", //身份证号
        //门店信息
        isBusiness: "0",
        businessScope: ["1"], //经营范围
        shopType: "", //门店类型,
        time: "", //营业时间
        positionAddress: "", //详细地址
        position: "", //定位信息
        latitude: "39.912139", //维度
        longitude: "116.481543", //经度
        area: { province: "", city: "", area: "" },
        storeCodeL: "", //小程序二维码
        serviceInfoId: "", //服务商信息Id
        serviceProviderTypeNumber: "T01", //服务商类型编号
        managementTypeIdList: [] //经营范围类型
      },
      serviceList: [],
      rules: {
        name: [
          { required: true, message: "请输入门店名称", trigger: "blur" },
          { validator: util.checkSpace, trigger: "blur" }
        ],
        address: [
          { required: true, message: "请输入门店地址", trigger: "blur" },
          { validator: util.checkSpace, trigger: "blur" }
        ],
        principal: [
          { required: true, message: "请输入法人", trigger: "blur" },
          { validator: util.checkSpace, trigger: "blur" }
        ],
        creditCode: [{ required: true, message: "请输入统一社会信用代码" }],
        linkName: [{ required: true, message: "请输入联系人" }],
        linkPhone: [
          { required: true, message: "请输入手机号" },
          { validator: util.validatePhone, trigger: "blur" }
        ],
        idcardNumber: [
          { required: false, trigger: "blur" },
          { validator: validIdentity, trigger: "blur" }
        ],
        // logoUrl: [{ required: true, message: '请上传公司LOGO' }],
        licenseUrl: [{ required: true, message: "公司营业执照信息（副本)" }],
        idcardFront: [{ required: true, message: "法人身份证正面电子版" }],
        idcardReverse: [{ required: true, message: "法人身份证反面电子版" }],
        // idcardNumber: [
        //   { required: true, message: '请输入身份证号' },
        //   { validator: util.idCard, trigger: 'blur' }
        // ],
        // foodUrl: [{ required: true, message: '食品流通许可证' }],
        shopType: [
          { required: true, message: "请选择门店类型", trigger: "change" }
        ],
        time: [
          {
            // type: 'date',
            required: true,
            message: "请选择营业时间",
            trigger: "change"
          }
        ],
        fixPhone: [{ validator: validTelPhone, trigger: "blur" }],
        email: [
          { required: true, message: "请填写邮箱" },
          { validator: validEmail, trigger: "blur" }
        ],
        position: [{ required: true, message: "请填写定位信息" }],
        positionAddress: [{ required: true, message: "请填写详细地址" }],
        area: [{ required: true, message: "请选择区域", trigger: "change" }],
        businessScope: [
          {
            // type: 'array',
            required: true,
            message: "请选择经营范围",
            trigger: "change"
          }
        ],
        managementTypeIdList: [
          { required: true, message: "请选择门店经营类型", trigger: "change" }
        ]
      },
      managementTypeList: [] //经营类型
    };
  },
  created() {
    this.getManagementTypelist();
  },
  mounted() {
    this.getServiceList();
    this.permission = util.getQuery("status");
    this.id = util.getQuery("id");
    if (this.permission != 1) {
      this.id = util.getQuery("id");
      this.getdeteils(this.id);
    } else {
      this.showMap = true;
    }
  },
  methods: {
    onChangeCity(val) {
      this.ruleForm.area.city = val.value;
    },
    onChangeProvince(val) {
      this.ruleForm.area.province = val.value;
    },
    onChangeArea(val) {
      this.ruleForm.area.area = val.value;
    },
    //获取经营类型列表
    getManagementTypelist() {
      getManagementTypeList({}).then(res => {
        if (res.code == 200) {
          this.managementTypeList = res.data.list;
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    Management(val) {
      console.log(this.ruleForm.businessScope);
      // for (let i = 0; i <  this.ruleForm.businessScope.length; i++) {
      //  if (this.ruleForm.businessScope[i] == "1") {
      //   for (let i = 0; i <  this.ruleForm.businessScope.length; i++) {
      //       if (this.ruleForm.businessScope[i] == "2" ) {
      //               this.ruleForm.businessScope.splice(1, 1);
      //       }
      //   }  if (this.ruleForm.businessScope[i] == "2") {
      //       for (let i = 0; i <  this.ruleForm.businessScope.length; i++) {
      //       if (this.ruleForm.businessScope[i] == "1" ) {
      //               this.ruleForm.businessScope.splice(1, 1);
      //       }
      //   }
      //   }
      //   }
      // }
    },
    replace(value, obj, key) {
      let that = this;
      let event = event || window.event;
      if (event.keyCode == 13) {
        setTimeout(() => {
          that.validItem(value, obj, key);
        }, 100);
      } else {
        that.validItem(value, obj, key);
      }
    },
    validItem(value, obj, key) {
      let res = "";
      switch (key) {
        case "name":
          res = util.replaceChineseAndBracket(value);
          break;
        case "linkName":
        case "principal":
          res = util.replaceChineseAndLetter(value);
          break;
        case "linkPhone":
        case "mobile":
          res = util.replaceNumber(value);
          break;
        case "fixPhone":
          res = util.replaceFixPhone(value);
          break;
        case "email":
          res = util.replaceEmail(value);
          break;
        case "creditCode":
        case "idcardNumber":
        case "foodLicenseNumber":
          res = util.replaceSocialCreditCode(value);
          break;
        case "registeredCapital":
          res = util.twoDecimal(value);
          break;
        case "fax":
          res = util.moreThanZero(value);
          break;
      }
      this.$set(obj, key, res);
    },
    //配置权限
    setRole(key) {
      return util.selectTitle(this.power, key);
    },
    //图片大小格式
    beforeAvatarUpload(file) {
      const isJPG =
        file.type === "image/png" ||
        file.type === "image/jpg" ||
        file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传图片格式错误!");
      }
      if (!isLt2M) {
        this.$message.error("只能上传jpg/png文件，且不超过2M!");
      }
      return isJPG && isLt2M;
    },
    //上传
    uploadSectionFile(param) {
      var fileObj = param.file;
      var data = new FormData();
      data.append("projectName", fileObj.name);
      data.append("file", fileObj);
      uploadFile(data).then(res => {
        if (res.code == 200) {
          let a = `${getFile}?id=${res.data.id}`;
          switch (this.imgindex) {
            case "logoUrl":
              this.ruleForm.logoUrl = a;
              break;
            case "licenseUrl":
              this.ruleForm.licenseUrl = a;
              break;
            case "foodUrl":
              this.ruleForm.foodUrl = a;
              break;
            case "idcardFront":
              this.ruleForm.idcardFront = a;
              break;
            case "idcardReverse":
              this.ruleForm.idcardReverse = a;
              break;
            default:
              break;
          }
        } else {
          this.$message({
            message: "图片上传失败",
            type: "error"
          });
        }
      });
    },
    //区别上传图片
    addindex(i) {
      this.imgindex = i;
    },
    //打开大图
    showimg(url) {
      window.open(url);
    },
    //选择区域
    onSelected(data) {
      // this.ruleForm.area.city = data.city.value;
      // this.ruleForm.area.area = data.area.value;
      // this.ruleForm.area.province = data.province.value;
    },
    //地址
    showMsgFromChild(data) {
      this.ruleForm.position = data.address;
      this.ruleForm.latitude = data.position[1];
      this.ruleForm.longitude = data.position[0];
      if (this.ruleForm.positionAddress == "") {
        this.ruleForm.positionAddress = data.address;
      } else {
        this.ruleForm.positionAddress = this.ruleForm.positionAddress;
      }
    },
    handleShowErrMsg(data) {
      this.showErrMsg = data;
    },
    downloadIamge(imgsrc, name) {
      //下载图片地址和图片名
      var image = new Image();
      // 解决跨域 Canvas 污染问题
      image.setAttribute("crossOrigin", "anonymous");
      image.onload = function() {
        var canvas = document.createElement("canvas");
        canvas.width = image.width;
        canvas.height = image.height;
        var context = canvas.getContext("2d");
        context.drawImage(image, 0, 0, image.width, image.height);
        var url = canvas.toDataURL("image/png"); //得到图片的base64编码数据
        var a = document.createElement("a"); // 生成一个a元素
        var event = new MouseEvent("click"); // 创建一个单击事件
        a.download = name || "photo"; // 设置图片名称
        a.href = url; // 将生成的URL设置为a.href属性
        a.dispatchEvent(event); // 触发a的单击事件
      };
      image.src = imgsrc;
    },
    downs() {
      this.downloadIamge(this.ruleForm.storeCode, "qrcode");
    },
    alicode() {
      let data = {
        companyId: this.ruleForm.parentId,
        storeId: this.id,
        storeName: this.ruleForm.name
      };
      aliqrcode(data).then(res => {
        this.ruleForm.storeCode = res.data.url;
        this.$message({
          message: res.data.msg,
          type: "success"
        });
      });
    },
    selectChange(val) {},
    deployTypehange(val) {
      this.ruleForm.checkCycle = "1";
      this.ruleForm.checkDate = "1";
      this.ruleForm.depositRatio = "";
    },
    //新建修改
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          if (this.ruleForm.area.area.length < 2) {
            this.$message.error("请选择区域");
            return;
          }
          if (
            this.ruleForm.depositRatio == "0" &&
            this.ruleForm.deployType == "3"
          ) {
            this.$message.error("保证金比例不能为0");
            return;
          }
          if (
            this.ruleForm.businessScope[0] == "1" &&
            this.ruleForm.businessScope.length == 1
          ) {
            this.$message.error("请选择经营范围");
            return;
          }
          this.ruleForm.openTime = this.ruleForm.time[0];
          this.ruleForm.closedTime = this.ruleForm.time[1];
          let a = this.ruleForm.businessScope;
          this.ruleForm.businessScope = a.toString();
          this.ruleForm.customerNature = this.customerNature;
          let postdata = JSON.parse(JSON.stringify(this.ruleForm));
          postdata.area =
            this.ruleForm.area.province +
            "," +
            this.ruleForm.area.city +
            "," +
            this.ruleForm.area.area;
          postdata.businessId = this.merchantId;
          postdata.source = 2; //2：商户平台门店管理；3：商户平台供应商管理；4：商户平台客户管理'
          postdata.type = 3;
          postdata.isStore = 0;
          postdata.isTenant = 1;
          if (postdata.status == true) {
            postdata.status = 0;
          } else {
            postdata.status = 1;
          }
          if (this.id != "") {
            postdata.id = this.id;
            updateBaseShop(postdata).then(res => {
              if (res.data == "isAdv") {
                this.$confirm(
                  "当您停用此门店后，关联此门店的广告会下架，是否确定停用此门店?",
                  "提示",
                  {
                    confirmButtonText: "确定停用",
                    cancelButtonText: "取消",
                    closeOnClickModal: false,
                    closeOnPressEscape: false,
                    type: "warning"
                  }
                )
                  .then(() => {
                    postdata.fixUpdate = true;
                    updateBaseShop(postdata).then(res => {
                      this.$message({
                        message: res.msg,
                        type: "success"
                      });
                      util.routerTo(
                        "/operate-management/store-management/store-storesManagement"
                      );
                    });
                  })
                  .catch(() => {
                    this.$message({
                      type: "info",
                      message: "已取消停用此门店"
                    });
                  });
              } else if (res.code == 200) {
                this.$message({
                  message: res.msg,
                  type: "success"
                });
                util.routerTo(
                  "/operate-management/store-management/store-storesManagement"
                );
              }
            });
          } else {
            insertBaseShop(postdata).then(res => {
              if (res.code == 200) {
                this.$message({
                  message: res.msg,
                  type: "success"
                });
                util.routerTo(
                  "/operate-management/store-management/store-storesManagement"
                );
              }
            });
          }
        } else {
          this.$message.error("请检查必填信息");
          return false;
        }
      });
    },
    //查看详情
    getdeteils(id) {
      let data = {
        id: id
        // businessId:this.merchantId
      };
      selectBaseShop(data).then(res => {
        if (res.code == 200) {
          res.data = Object.assign(res.data, res.data.shopDetail);
          if (res.data.status == 0) {
            res.data.status = true;
          } else {
            res.data.status = false;
          }
          res.data.time = [];
          res.data.time.push(res.data.openTime);
          res.data.time.push(res.data.closedTime);
          this.ruleForm = res.data;
          this.ruleForm.oldLinkPhone = this.ruleForm.linkPhone; // //商户旧手机号
          this.ruleForm.serviceProviderTypeNumber = "T01";
          this.ruleForm.businessScope = this.ruleForm.businessScope.split(",");
          if (this.ruleForm.latitude !== "") {
            this.showMap = true;
          } else {
            this.showMap = false;
          }
          this.ruleForm.isBusiness = this.ruleForm.isBusiness.toString();
          if (this.ruleForm.area) {
            let areastr = this.ruleForm.area.split(",");
            // let areastr = this.ruleForm.region.split(",");
            if (areastr) {
              this.ruleForm.area = {
                province: areastr[0],
                city: areastr[1],
                area: areastr[2]
              };
            } else {
              this.ruleForm.area = { province: "", city: "", area: "" };
            }
          } else {
            this.ruleForm.area = { province: "", city: "", area: "" };
          }
          if (!this.ruleForm.managementTypeIdList) {
            this.ruleForm.managementTypeIdList = [];
          }
        }
      });
    },
    getServiceList() {
      let data = {
        shopId: this.merchantId,
        serviceProviderTypeNumber: "T01"
      };
      findServiceProviderByTypeNumberList(data).then(res => {
        if (res.code == 200) {
          this.serviceList = res.data.list;
        }
      });
    },
    editstatus() {
      this.permission = 1;
      this.showMap = true;
    }
  }
};
</script>
<style>
.qrcodes .map-search {
  background: #fff;
}
.sd-input input {
  width: 80%;
  height: 30px;
  float: left;
}
</style>

<style scoped>
.container_box {
  padding: 0px 20px;
}
.el-tab-pane .el-row {
  width: 95%;
}
.imgbox {
  width: 180px;
  height: 150px;
  border: 1px dashed #dcdfe6;
}
.imgbox img {
  width: 100%;
  height: 100%;
}
.qrcodes {
  margin-top: 70px;
  z-index: 1111;
}
.qrcode {
  margin-top: 70px;
  z-index: 1;
}
</style>
<style>
.map-content {
  width: 100%;
  height: 200px;
}
.map-demo {
  width: 100%;
  height: 200px;
}
.map-error-position .el-form-item__error {
  top: 20%;
}
</style>



